import React from 'react';
import { Layout } from '@douyinfe/semi-ui';
import NavApp from './components/nav';
import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import HomePage from './pages/HomePage';
import MonitoringStatisticsPage from './pages/MonitoringStatisticsPage';
import realtimePage from './pages/satellitePages/realtimePage';
import SkyPlotPage from './pages/satellitePages/skyPlotPage';

function App() {
  const { Header, Content } = Layout;

  const commonStyle = {
    height: 64,
    display: 'flex',
    alignItems: 'center',
    background: 'var(--semi-color-fill-0)'
  };

  return (
    <Router>
      <Layout 
        className="components-layout-demo"
        style={{ 
          backgroundImage: "url('/img/indexBanner.png')",
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundAttachment: 'fixed'
        }}
      >
        <Header style={commonStyle}><NavApp /></Header>
        <Content style={{
          height: 'calc(100vh - 64px)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'rgba(255, 255, 255, 0)' // 半透明背景确保内容清晰可见，测试用
        }}>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/monitoringStatistics" component={MonitoringStatisticsPage} />
            <Route path="/satellite/realtime" component={realtimePage} />
            <Route path="/satellite/skyPlot" component={SkyPlotPage} />
          </Switch>
        </Content>
      </Layout>
    </Router>
  );
}

export default App;
